import Taro, { useState, useDidShow } from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.scss';
import IconFont, { IconfontProps } from '../iconfont/index';

interface ICustomTopBarProps {
    iconNames?: {
        name: IconfontProps['name']
        onClick?: ((event?: any) => any)
    }[]
    title: string
}

export const CustomTopBar = (props: ICustomTopBarProps) => {

    const [totalHeight, setTotalHeight] = useState(0)

    const [menuButtonWidth, setMenuButtonWidth] = useState(0)

    const [navTop, setNavTop] = useState(0)

    useDidShow(() => {

        const { top, height, width } = Taro.getMenuButtonBoundingClientRect()

        console.log(Taro.getMenuButtonBoundingClientRect())

        Taro.getSystemInfo({
            success: res => {
                console.log(res.statusBarHeight)

                setTotalHeight(res.statusBarHeight + height + (top - res.statusBarHeight) * 2)

                setNavTop(top)

                setMenuButtonWidth(width)

            }
        })

    })
    return (
        <View style={{ height: `${totalHeight}px` }} className='top-bar'>
            <View className="top-bar-action-wrap"
                // style='top:{{ navTop }}px;background-color:rgba(255,255,255,.6)'
                style={{
                    top: `${navTop}px`,
                    background: 'rgba(255,255,255,.6)',
                    border: '0.5px solid #e6e6e6',
                    width: `${menuButtonWidth}px`,
                    height: '32px',
                    borderRadius: '16px'
                }}
            >
                {
                    props.iconNames && props.iconNames.map((item) => {
                        return (
                            <View className='icon' onClick={item.onClick}>
                                <IconFont name={item.name} size={32} />
                            </View>
                        )
                    })
                }
                {/* <View className='top-bar-action_item'>1</View>
                <View className='top-bar-action_item'>2</View> */}
            </View >
            <View className='top-bar-title' style={{
                top: `${navTop - 8}px`,
                fontSize: '16px'
            }}>
                {props.title}
            </View>
        </View >
    )
}